﻿<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Toukokuu Suomessa</title>
    <style type="text/css">
        /* Image Menu v 2.2 */
        #imageMenu { position: relative; width: 600px; height: 250px; overflow: hidden; }
        #imageMenu ul { list-style: none; margin: 0px; display: block; width: 1200px; height: 250px; }
        #imageMenu ul li { float: left; }
        #imageMenu ul li a { text-indent: -1000px; background:#FFFFFF none repeat scroll 0%; border-right: 2px solid #fff;
	        cursor:pointer; display:block; overflow:hidden; width:98px; height: 250px; }
        #imageMenu ul li.mtc a { background: url(img/mtc/button.jpg) scroll 0%; }
        #imageMenu ul li.helsinki a { background: url(img/hki/button.jpg) scroll 0%; }
        #imageMenu ul li.hameenlinna a { background: url(img/hml/button.jpg) scroll 0%; }
        #imageMenu ul li.kuopio a { background: url(img/kpo/button.jpg) scroll 0%; }
        #imageMenu ul li.espoo a { background: url(img/esp/button.jpg) scroll 0%; }
        #imageMenu ul li.oulu a { background: url(img/oul/button.jpg) scroll 0%; width: 400px; }
        .clear { clear: both; }
        /*********************/
        * { margin: 0; padding: 0; border: 0; text-align: center; position: relative; font: bold 12px arial; }
        html, body { background-color: Black; }
        .menu { margin-top: 45px; }
        .menutitle { width: 600px; height: 40px; margin: 0px auto 0px auto; background-image: url(img/main_tb.png); }
        .menutitledate { position: absolute; width: 100px; height: 40px; top: 13px; color: White; font: normal normal normal smaller Verdana; }
        .mainBar { width: 600px; height: 250px; margin: 20px auto 10px auto; border: solid 2px white; }
        #menutitlestartdate { left: 25px; }
        #menutitleenddate	{ left: 475px;}
    </style>
    <script type="text/javascript" src="js/mootools.js"></script>
    <script type="text/javascript" src="js/imageMenu.js"></script>
</head>
<body>
    <div class="menu">
        <div class="menutitle">
            <p class="menutitledate" id="menutitlestartdate">23.05.2001</p>
            <p class="menutitledate" id="menutitleenddate">13.06.2003</p>
        </div>
        <div class="mainBar">
            <div id="imageMenu">
			    <ul>
				    <li class="mtc"><a href="./mtc"></a></li>
				    <li class="helsinki"><a href="./hki"></a></li>
				    <li class="hameenlinna"><a href="./hml"></a></li>
				    <li class="kuopio"><a href="./kpo"></a></li>
				    <li class="espoo"><a href="./esp"></a></li>
				    <li class="oulu"><a href="./oul"></a></li>
			    </ul>
		    </div>
		    <script type="text/javascript">
    	        window.addEvent('domready', function(){var myMenu = new ImageMenu($$('#imageMenu a'),{openWidth:400, border:0, onOpen:function(e,i){window.open(e, '_blank');}});});
		    </script>
        </div>
    </div>
</body>
</html>
